<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="searchParams" ref="searchForm">
        <el-form-item label="资源名称：" prop="name">
          <el-input v-model="searchParams.name" placeholder="资源名称" />
        </el-form-item>
        <el-form-item label="资源路径：" prop="url">
          <el-input v-model="searchParams.url" placeholder="资源路径" />
        </el-form-item>
        <el-form-item label="资源分类：" prop="categoryId">
          <el-select v-model="searchParams.categoryId" placeholder="全部">
            <el-option
              v-for="item in allCategory"
              :key="item.id"
              :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" :disabled="loading" @click="getTableData(1)">查询搜索</el-button>
        <el-button :disabled="loading" @click="reset">重置</el-button>
      </el-form>
      <el-button @click="handleCreate">添加资源</el-button>
    </div>

    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%">
      <el-table-column prop="id" label="编号"> </el-table-column>
      <el-table-column prop="name" label="资源名称"> </el-table-column>
      <el-table-column prop="url" label="资源路径"> </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
      <el-table-column prop="createdTime" label="添加时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
           <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button><br>
           <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchParams.current"
      :page-sizes="[5, 10, 20]"
      :page-size="searchParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      :disabled="loading"
      :total="total">
    </el-pagination>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      @close="handleClose">
      <el-form label-width="90px" :model="resourceForm" ref="resourceForm">
        <el-form-item label="资源名称：">
            <el-input v-model="resourceForm.name" />
        </el-form-item>
        <el-form-item label="资源路径：">
            <el-input v-model="resourceForm.url" />
        </el-form-item>
        <el-form-item label="资源分类">
          <el-select v-model="resourceForm.categoryId">
            <el-option
              v-for="item in allCategory"
              :key="item.id"
              :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述：">
            <el-input v-model="resourceForm.description" type="textarea" :rows="4" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { getResourcePages, getAllCategory, saveOrUpdate, deleteResource } from '@/services/resource'
import { Form } from 'element-ui'

export default Vue.extend({
  name: 'ResourceIndex',

  data () {
    return {
      searchParams: {
        name: null,
        current: 1,
        size: 5,
        url: null,
        categoryId: null
      },
      loading: false,
      tableData: [],
      total: 0,
      allCategory: [],
      dialogVisible: false,
      resourceForm: {
        id: '',
        name: '',
        url: '',
        categoryId: '',
        description: ''
      }
    }
  },

  mounted () {
    this.getTableData()
    this.loadAllCategory()
  },

  methods: {
    getTableData (current: number | void) {
      if (current) {
        this.searchParams.current = current
      }
      this.loading = true
      getResourcePages(this.searchParams).then(res => {
        if (res.data.code === '000000') {
          const { records, total } = res.data.data
          this.tableData = records
          this.total = total
        }
      }).finally(() => {
        this.loading = false
      })
    },

    loadAllCategory () {
      getAllCategory().then(res => {
        if (res.data.code === '000000') {
          this.allCategory = res.data.data
        }
      })
    },

    handleCurrentChange (val: number) {
      this.searchParams.current = val
      this.getTableData()
    },

    handleSizeChange (val: number) {
      this.searchParams.size = val
      this.searchParams.current = 1
      this.getTableData()
    },

    reset () {
      (this.$refs.searchForm as Form).resetFields()
      this.searchParams.current = 1
      this.getTableData()
    },

    handleCreate () {
      this.dialogVisible = true
    },

    handleUpdate (row: any) {
      const { id, name, url, description, categoryId } = row
      this.resourceForm = { id, name, url, description, categoryId }
      this.dialogVisible = true
    },

    submitForm () {
      saveOrUpdate(this.resourceForm).then(res => {
        if (res.data.code === '000000') {
          this.$message.success(this.resourceForm.id ? '编辑成功' : '添加成功')
          this.dialogVisible = false
          this.getTableData()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },

    handleDelete (id: number) {
      this.$confirm('确定删除?', '提示').then(() => {
        deleteResource(id).then(res => {
          if (res.data.code === '000000') {
            this.$message.success('删除成功')
            this.getTableData()
          }
        })
      }).catch(() => {
        this.$message('已取消删除')
      })
    },

    handleClose () {
      (this.$refs.resourceForm as Form).resetFields()
    }
  }
})
</script>

<style lang="scss" scoped>
.input-name{
  margin: 10px;
  width: 150px;
}
</style>
